<template>
    <div class="ui-calendar-controls">
        <ui-icon-button
            class="ui-calendar-controls__nav-button"
            icon="keyboard_arrow_left"
            type="secondary"

            :disabled="previousMonthDisabled"

            @click="goToPreviousMonth"
        >
            <ui-icon>
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                    <path d="M15.422 16.078l-1.406 1.406-6-6 6-6 1.406 1.406-4.594 4.594z"/>
                </svg>
            </ui-icon>
        </ui-icon-button>

        <div class="ui-calendar-controls__month-and-year">{{ monthAndYear }}</div>

        <ui-icon-button
            class="ui-calendar-controls__nav-button"
            icon="keyboard_arrow_right"
            type="secondary"

            :disabled="nextMonthDisabled"

            @click="goToNextMonth"
        >
            <ui-icon>
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                    <path d="M8.578 16.36l4.594-4.595L8.578 7.17l1.406-1.405 6 6-6 6z"/>
                </svg>
            </ui-icon>
        </ui-icon-button>
    </div>
</template>

<script>
import UiIcon from './UiIcon.vue';
import UiIconButton from './UiIconButton.vue';

import dateUtils from './helpers/date';

export default {
    name: 'ui-calendar-controls',

    props: {
        lang: Object,
        dateInView: Date,
        minDate: Date,
        maxDate: Date
    },

    computed: {
        monthAndYear() {
            return dateUtils.getMonthFull(this.dateInView, this.lang) + ' ' +
                this.dateInView.getFullYear();
        },

        previousMonthDisabled() {
            if (!this.minDate) {
                return false;
            }

            const lastDayOfPreviousMonth = dateUtils.clone(this.dateInView);

            // Setting the date to zero goes to the last day in previous month
            lastDayOfPreviousMonth.setDate(0);

            return this.minDate.getTime() > lastDayOfPreviousMonth.getTime();
        },

        nextMonthDisabled() {
            if (!this.maxDate) {
                return false;
            }

            const firstDayOfNextMonth = dateUtils.clone(this.dateInView);

            // Set the month ot next month, and the day to the first day
            // If the month overflows, it increments the year
            firstDayOfNextMonth.setMonth(this.dateInView.getMonth() + 1, 1);

            return this.maxDate.getTime() < firstDayOfNextMonth.getTime();
        }
    },

    methods: {
        goToPreviousMonth() {
            const date = dateUtils.clone(this.dateInView);
            date.setMonth(date.getMonth() - 1);

            this.goToDate(date, { isForward: false });
        },

        goToNextMonth() {
            const date = dateUtils.clone(this.dateInView);
            date.setMonth(date.getMonth() + 1);

            this.goToDate(date, { isForward: true });
        },

        goToDate(date, options = { isForward: true }) {
            this.$emit('go-to-date', date, options);
        }
    },

    components: {
        UiIcon,
        UiIconButton
    }
};
</script>

<style lang="scss">
@import './styles/imports';

.ui-calendar-controls {
    align-items: center;
    display: flex;
    height: $ui-calendar-controls-height;
    justify-content: space-between;
}

.ui-calendar-controls__month-and-year {
    font-size: rem-calc(15px);
}
</style>
